<template>
	<view class="content">
		<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-bg-blue--light tn-padding tn-text-center">
			<view class="tn-flex tn-flex-4 tn-flex-direction-column tn-bg-white tn-padding">
				<view class="avatar tn-margin-left-sm">
					<tn-avatar backgroundColor="#f3f3f3"  :badge="true" badgeIcon="vip-diamond" badgeBgColor="#f89100" :src="avator(ranks[1].user_id[0])"  size="xl"></tn-avatar>
				</view>
				  <view class="tn-text-md tn-text-bold"  >
				     {{ranks[1].user_id[0]['nickname'] || '匿名用户'}}
				  </view>
				  <view class="tn-padding-top-xs tn-text-sm tn-padding-left-sm">
				   {{ranks[1].progress || '100%'}}
				  </view>
			</view> 
			<view class="tn-flex tn-flex-4 tn-flex-direction-column tn-bg-white tn-padding tn-padding-top-xl">
				<view class="avatar tn-margin-left-sm">
					<tn-avatar backgroundColor="#f3f3f3"  :badge="true" badgeIcon="vip" badgeBgColor="#f34500"  :src="avator(ranks[0].user_id[0])"  size="xl"></tn-avatar>
				</view>
				  <view class="tn-text-md tn-text-bold"  >
				     {{ranks[0].user_id[0]['nickname'] || '匿名用户'}}
				  </view>
				  <view class="tn-padding-top-xs tn-text-sm tn-padding-left-sm">
				     {{ranks[0].progress || '100%'}}
				  </view>
			</view> 
			<view class="tn-flex tn-flex-4 tn-flex-direction-column tn-bg-white tn-padding">
				<view class="avatar tn-margin-left-sm">
						<tn-avatar backgroundColor="#f3f3f3"  :badge="true" badgeIcon="vip-diamond" badgeBgColor="#f3cb00"  :src="avator(ranks[2].user_id[0])"  size="xl"></tn-avatar>
				</view>
				  <view class="tn-text-md tn-text-bold"  >
				     {{ranks[2].user_id[0]['nickname'] || '匿名用户'}}
				  </view>
				  <view class="tn-padding-top-xs tn-text-sm tn-padding-left-sm">
				     {{ranks[2].progress || '100%'}}
				  </view>
			</view> 
		</view> 
		<view class="tn-margin-bottom-sm" v-for="(item,index) in ranks.slice(3,10)" :key="index">
		  <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-bg-gray--light tn-padding website-shadow">
		    <view class="justify-content-item">
		      <view class="tn-flex tn-flex-col-center tn-flex-row-left">
				  <view class="avatar tn-margin-left-sm">
					  <tn-avatar backgroundColor="#fff"  :badge="true" :badgeText="(index+4)+''" :src="avator(item.user_id[0])"  size="lg"></tn-avatar>
					  <!-- <view :class="`so tn-cool-bg-color-${index+1}`">{{index+1}}</view> -->
				  </view>
		        <view class="tn-padding-right tn-margin-left-sm tn-color-black">
		          <view class="tn-padding-right tn-padding-left-sm tn-text-md">
		            {{item.user_id[0] && item.user_id[0]['nickname'] || '匿名用户'}}
		          </view>
		          <view class="tn-padding-right tn-padding-top-xs tn-text-sm tn-padding-left-sm">
		            {{item.progress || '100%'}}
		          </view>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="tn-margin" v-show="!ranks.length">
			<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/no.png" mode="widthFix" class="no-data"></image>
			<view class="no">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	const obj=uniCloud.importObject('page-data-center')
	export default {
		data() {
			return {
				ranks:[]
			}
		},
		onLoad() {
			 obj.getranks().then((res)=>{
				 console.log('getranks',res)
				 this.ranks=res.data.reverse() || []
			 })
		},
		methods: {
			avator(val){
				console.log(val)
				let avatar_file=val && val.avatar_file ? val.avatar_file || null : null
				return avatar_file && avatar_file.url ? avatar_file.url : 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/默认头像.png'
			}
		}
	}
</script>

<style>
.avatar{
	position: relative;
}
.so{
	position: absolute;
	left: 40px;
	top: -5px;
	z-index: 999;
	width: 20px;
	height: 20px;
	border-radius: 10px;
}
.content{
	color: #333;
	font-size: 14px;
}
.no-data{
	width: 200px;
	margin: 20px auto;
}
</style>
